	

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>	
  
	<form class="navbar-form" role="search">
        <div class="input-group">
		  <input type="text" class="form-control txtSearch" placeholder="Search" id="query" name="query" value="">
				 <div class="input-group-btn">
				<button id="btnSearch" type="submit" class="btn btn-success"><span class="glyphicon glyphicon-search"></span></button>
				</div>
		</div>
		
		<a href="#" class="btn btn-social-icon btn-twitter">
				<i class="fa fa-twitter"></i>
			  </a>
			  <a href="https://www.facebook.com/pages/Petformance-Veterinary-Animal-Health-and-Wellness-Clinic/236203746407740" class="btn btn-social-icon btn-facebook">
				<i class="fa fa-facebook"></i>
			  </a>
			  <a class="btn btn-social-icon btn-instagram">
				<i class="fa fa-instagram"></i>
		</a>
		
    </form>

    
  
<script type="text/javascript">	
	$(document).ready(function(){
		$.ajax({
			url: 'list.php',
			dataType: 'json',
			success: function(result){
				console.log(result);
		
				$( ".txtSearch" ).autocomplete({
				source: result.data,
				select: function(event,ui){
								      		$('.txtSearch').val(ui.item.label);
								      		//$('#btnSearch').click();
								      		window.location.replace(ui.item.href);
								  }			
			}).autocomplete("instance")._renderItem = function(ul,item){
								    	$(ul).addClass('searchWrapUl')
						    			 return $("<li />")
								            .append("<a class='searchResult'><img src='" + "' />" + item.label + "<br>" + item.desc + "</a>")
								            .appendTo(ul);
								    };  	
			}
		});	
	});
</script>
